<template>
  <div class="base-panels">
    <h2 class="title2">工程基本信息 </h2>
    <table class="show-table">
      <colgroup>
        <col width="136">
        <col width="275">
        <col width="136">
        <col width="275">
      </colgroup>
      <tr>
        <td class="key">标段编号</td>
        <td>{{detail?.activityNo}}</td>
        <td class="key">业务类别</td>
        <td>{{detail?.activityBusiName}}</td>
      </tr>
      <tr>
        <td class="key">发包单位</td>
        <td colspan="3">
          {{ detail?.contUnitName }}
        </td>
      </tr>
      <tr>
        <td class="key">承接单位</td>
        <td>
          <router-link target="_blank" :to="{ path: `/company/${detail.projUtakeUnitId}` }"  class="blue" >
            {{ detail?.projUtakeUnitName }}</router-link >
        </td>
        <td class="key">承接资质</td>
        <td>{{detail?.projQualName}}</td>
      </tr>
      <tr>
        <td class="key">工程用途</td>
        <td>{{detail?.projUsage}}</td>
        <td class="key">工程规模</td>
        <td>{{detail?.projScale}}</td>
      </tr>
      <tr>
        <td class="key">发包方式</td>
        <td>{{detail?.projContName}}</td>
        <td class="key">合同金额(万元)</td>
        <td>{{detail?.fixedAmount}}</td>
      </tr>
      <tr>
        <td class="key">约定工期(天)</td>
        <td>{{detail?.projTimeLimit}}</td>
        <td class="key">合同签订日期</td>
        <td>{{ parseTime(detail?.contractDate)}} </td>
      </tr>
      <tr>
        <td class="key">计划开工日期</td>
        <td>{{parseTime(detail?.planStartDate)}}</td>
        <td class="key">计划竣工日期</td>
        <td>{{parseTime(detail?.planEndDate) }}</td>
      </tr>


    </table>


    <h2 class="title2 pt40">所属项目信息 </h2>
    <Row type="flex" justify="space-between">
      <Col flex="820px">
        <table class="show-table">
          <colgroup>
            <col width="136">
            <col width="275">
            <col width="136">
            <col width="275">
          </colgroup>
          <tr>
            <td class="key">立项赋码</td>
            <td>{{detail?.assignCode}}</td>
            <td class="key">项目类别</td>
            <td>{{detail?.projectTypeName}}</td>
          </tr>
          <tr>
            <td class="key">项目区划</td>
            <td>{{detail?.projectRegion}}</td>
            <td class="key">详细地址</td>
            <td>{{detail?.projectAddr}}</td>
          </tr>
          <tr>
            <td class="key">建设单位</td>
            <td>{{detail?.constrUnitName}}</td>
            <td class="key">建设单位统一社会信用代码</td>
            <td>{{detail?.constrUnitCode}}</td>
          </tr>
          <tr>
            <td class="key">资金来源</td>
            <td>{{detail?.capitalNature === '1'?'国有资金':'非国有资金'}}</td>
            <td class="key">总投资（万元)</td>
            <td>{{detail?.fixedAmount}}</td>
          </tr>
          <tr>
            <td class="key">工程用途</td>
            <td>{{detail?.projectUsageName}}</td>
            <td class="key">建设性质</td>
            <td>{{detail?.projectNatureName}}</td>
          </tr>
          <tr>
            <td class="key">计划开工日期</td>
            <td>{{ parseTime(detail?.planStartDate)}}</td>
            <td class="key">计划竣工日期</td>
            <td>{{ parseTime(detail?.planEndDate)}}</td>
          </tr>
        </table>
      </Col>
      <Col flex="330px">
        <div class="flex h-100p">
          <div id="map" v-if="detail.longLatitude && detail.longLatitude!=='0,0'" class="map"></div>
          <div class="map noData" v-else></div>
          <p>项目地址：{{detail?.projectAddr}}</p>
        </div>
      </Col>

    </Row>
  </div>

</template>

<script lang="ts">
import {defineComponent, PropType, toRefs, watch} from 'vue';
import {Row, Col} from 'ant-design-vue';
import {activityBaseModel} from "/@/api/activity";
import { parseTime } from '/@/utils';
import AMapLoader from "@amap/amap-jsapi-loader";

export default defineComponent({
  components: {  Row , Col },
  props : {
    detail:{
      type: Object as PropType<activityBaseModel>,
      default: {}
    }
  },
  setup(props) {
    const { detail } = toRefs(props);
    watch(detail, (cur)=> {
      let longLatitude:any = cur.longLatitude;
      if(longLatitude){
        const position = longLatitude.split(',').map(Number);
        AMapLoader.load({
          key: "38b3eb45ad036a8f2351115465fd35a8",
          version: "1.4.15",
          plugins: [],
          AMapUI: {
            version: '1.1',
            plugins:[],
          }
        }).then( AMap => {
          let map = new AMap.Map('map', {
            zoom:11,
            center: position
          });
          let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
          let marker = new AMap.Marker({
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
            position: position
          });
          marker.content = '这里是项目地址';
          marker.on('click', function(e){
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
          });
          map.add(marker);
        }).catch(e => {
          console.log(e);
        })
      }

    })
    return {
      detail, parseTime
    }
  },
})
</script>

<style lang="less" scoped>
.base-panels{
  padding: 0 20px 50px;
}

.title2{
  padding: 20px 0 5px;

  &.pt40{
    padding-top: 40px;
  }
}

.show-table{
  width: 100%;
  border: 1px solid #f0f0f0;

  tr{
    td{
      height: 50px;
      padding: 5px 15px;
      vertical-align: center;
      border: 1px solid #EAEAEA;

      &.key{
        background: #F3F3F3;
      }

    }
  }
}

.flex{
  flex-wrap: wrap;

  .map{
    width: 100%;
    height: 280px;
  }

  p{
    width: 100%;
    margin: 5px 0 0 0;
    color: #000;
  }
}

.noData{
  background: #fcfcfc url('/src/assets/img/nodata.png') no-repeat center;
  border: 1px solid #EAEAEA;
}
</style>
